<template>

    <div class="region region--primary">
        <div class="element element--ticker">
            <header class="header header--secondary">
                <h2 class="title">
                    <span class="label"><router-link to="">{{ props.title }}</router-link></span>
                </h2>
            </header>
            <div class="tickers-mdt-horizontal  tickers-short">
                <!-- 左边 -->
                <div class="ticker__column">
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <a class="link ticker__symbol">DJIA</a>
                            <a class="link ticker__name">Dow Jones Industrial Average</a>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color">39,558.11</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent">0.32%</bg-quote>
                            <bg-quote field="change" format="0,0.00" channel="/zigman2/quotes/210598065/realtime"
                                class="ticker__chg">126.60</bg-quote>
                        </div>
                    </div>
                    <div id="mkchart"></div>
                </div>
                <!-- 中间 -->
                <div class="ticker__column">
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <router-link class="link ticker__symbol">COMP</router-link>
                            <router-link class="link ticker__name">NASDAQ Composite Index</router-link>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color">16,511.18</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent">0.75%</bg-quote>
                            <bg-quote class="ticker__chg">122.94</bg-quote>
                        </div>
                    </div>
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <a class="link ticker__symbol">SPX</a>
                            <a class="link ticker__name">S&amp;P 500 Index</a>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color">5,246.68</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent">0.48%</bg-quote>
                            <bg-quote class="ticker__chg">25.26</bg-quote>
                        </div>
                    </div>
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <a class="link ticker__symbol">GDOW</a>
                            <a class="link ticker__name">Global Dow Realtime USD</a>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color positive">4,730.37</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent positive">0.26%</bg-quote>
                            <bg-quote class="ticker__chg positive">12.50</bg-quote>
                        </div>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="ticker__column">
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <a class="link ticker__symbol">GC00</a>
                            <a class="link ticker__name">Gold Continuous Contract</a>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color positive">$2,369.30</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent positive">0.40%</bg-quote>
                            <bg-quote class="ticker__chg positive">9.40</bg-quote>
                        </div>
                    </div>
                    <div class="ticker__info ticker-positive">
                        <div class="horizontal--ticker w50">
                            <a class="link ticker__symbol">CL.1</a>
                            <a class="link ticker__name">Crude Oil WTI (NYM $/bbl) Front Month</a>
                        </div>
                        <div class="horizontal--value w30">
                            <bg-quote class="ignore-color positive">$78.45</bg-quote>
                        </div>
                        <div class="horizontal--chg positive w20">
                            <bg-quote class="ticker__chg__percent positive">0.55%</bg-quote>
                            <bg-quote class="ticker__chg positive">0.43</bg-quote>
                        </div>
                    </div>
                    <div class="ticker__button">
                        <a class="btn btn--outline">Show More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['title'])
</script>
<style scoped lang='scss'>
#mkchart {
    height: 120px;
    max-height: 120px;
}
</style>